import React, {
  useState,
  forwardRef,
  useEffect
} from "react";
import { Modal, Tabs } from "antd";
import styles from "./index.less";
import SelectOrgs from "../selectOrgs";
import SelectPositions from "../selectPosition";
import SelectUsers from "../selectUsers";
import SelectRoles from "../selectRoles";

const { TabPane } = Tabs;

export default forwardRef((props) => {
  const { onClose, visible, onReceiveOk, listOfReceivers } = props;
  const [activeKey, setactiveKey] = useState("1");
  // 已选择组织
  const [orgsOfSelected, setorgsOfSelected] = useState([]);
  // 已选择岗位
  const [positionsOfSelected, setpositionsOfSelected] = useState([]);
  // 已选择角色
  const [rolesOfSelected, setrolesOfSelected] = useState([]);
  // 已选择用户
  const [usersOfSelected, setusersOfSelected] = useState([]);

  useEffect(() => {
    // 编辑时候初始化四个范围已选择信息
    if (listOfReceivers.length > 0) {
      initReceiversData();
    }
  }, [listOfReceivers]);

  // 编辑时候初始化四个范围已选择信息
  function initReceiversData() {
    const orgArr = listOfReceivers.filter(r => r.rangeType === "ORG");
    if (orgArr.length > 0) {
      setorgsOfSelected(
        orgArr[0].rangeEntityId.map(r => ({
          orgId: Object.keys(r)[0],
          orgName: Object.values(r)[0]
        }))
      );
    }
    const POSArr = listOfReceivers.filter(r => r.rangeType === "POS");
    if (POSArr.length > 0) {
      setpositionsOfSelected(
        POSArr[0].rangeEntityId.map(r => ({
          id: Object.keys(r)[0],
          name: Object.values(r)[0]
        }))
      );
    }
    const ROLEArr = listOfReceivers.filter(r => r.rangeType === "ROLE");
    if (ROLEArr.length > 0) {
      setrolesOfSelected(
        ROLEArr[0].rangeEntityId.map(r => ({
          id: Object.keys(r)[0],
          roleName: Object.values(r)[0]
        }))
      );
    }
    const USERArr = listOfReceivers.filter(r => r.rangeType === "USER");
    if (USERArr.length > 0) {
      setusersOfSelected(
        USERArr[0].rangeEntityId.map(r => ({
          userId: Object.keys(r)[0],
          userName: Object.values(r)[0]
        }))
      );
    }
  }
  function callback(key) {
    setactiveKey(key);
  }

  const onOk = () => {
    const arr = [];
    if (orgsOfSelected.length > 0) {
      arr.push({
        rangeType: "ORG",
        rangeEntityId: orgsOfSelected.map(o => ({
          [o.orgId]: o.orgName
        }))
      });
    }
    if (positionsOfSelected.length > 0) {
      arr.push({
        rangeType: "POS",
        rangeEntityId: positionsOfSelected.map(o => ({
          [o.id]: o.name
        }))
      });
    }
    if (rolesOfSelected.length > 0) {
      arr.push({
        rangeType: "ROLE",
        rangeEntityId: rolesOfSelected.map(o => ({
          [o.id]: o.roleName
        }))
      });
    }
    if (usersOfSelected.length > 0) {
      arr.push({
        rangeType: "USER",
        rangeEntityId: usersOfSelected.map(o => ({
          [o.userId]: o.userName
        }))
      });
    }
    onReceiveOk(arr);
  };

  return (
    <Modal
      title="接收用户范围"
      visible={visible}
      onCancel={onClose}
      onOk={onOk}
      wrapClassName={styles.modal}
    >
      <Tabs activeKey={activeKey} onChange={callback}>
        <TabPane tab="组织" key="1" />
        <TabPane tab="岗位" key="2" />
        <TabPane tab="角色" key="3" />
        <TabPane tab="用户" key="4" />
      </Tabs>
      {activeKey === "1" && (
        <SelectOrgs
          orgsOfSelected={orgsOfSelected}
          setorgsOfSelected={setorgsOfSelected}
        />
      )}
      {activeKey === "2" && (
        <SelectPositions
          positionsOfSelected={positionsOfSelected}
          setpositionsOfSelected={setpositionsOfSelected}
        />
      )}
      {activeKey === "3" && (
        <SelectRoles
          rolesOfSelected={rolesOfSelected}
          setrolesOfSelected={setrolesOfSelected}
        />
      )}
      {activeKey === "4" && (
        <SelectUsers
          usersOfSelected={usersOfSelected}
          setusersOfSelected={setusersOfSelected}
        />
      )}
    </Modal>
  );
});
